<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>系统公告</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../../css/swiper.min.css">
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<script src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
	html::after {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		content: '';
		display: block;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-color: #f2f7f6;
		z-index: -1;
	}
	
	body {
		font-family: 'Microsoft YaHei', Arial, sans-serif;
		color: #333;
		background-color: #f2f7f6;
	}

	.page-container {
		width: 100%;
		max-width: 1280px; 
		margin: 0 auto;
		padding: 0 10px;
		box-sizing: border-box;
	}

	/* 轮播图样式 */
	#test1 {
		overflow: hidden;
		border-radius: 6px;
		margin: 20px auto 30px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.08);
		height: 350px;
	}

	.layui-carousel {
		height: 350px !important;
	}

	.layui-carousel img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#test1 .layui-carousel-ind {
		position: absolute;
		bottom: 20px;
		text-align: center;
		width: 100%;
	}

	#test1 .layui-carousel-ind li {
		width: 30px;
		height: 6px;
		border-width: 0;
		border-style: solid;
		border-color: transparent;
		border-radius: 3px;
		background-color: rgba(255, 255, 255, 0.6);
		margin: 0 4px;
	}

	#test1 .layui-carousel-ind li.layui-this {
		width: 50px;
		height: 6px;
		border-width: 0;
		border-style: solid;
		border-color: transparent;
		border-radius: 3px;
		background-color: #3a7e6f;
	}

	/* 列表页样式 */
	.content-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		background-color: #3a7e6f;
		color: #fff;
		border-radius: 6px;
		margin-bottom: 20px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	}
	
	.content-title .title {
		font-size: 16px;
		color: #fff;
		line-height: 1.4;
		font-weight: 500;
	}
	
	.content-title .position {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
		line-height: 1.4;
	}

	.filter {
		background-color: #fff;
		padding: 15px 20px;
		margin-bottom: 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-radius: 6px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	}
	
	.filter .item-list {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.filter .item-list .lable {
		font-size: 15px;
		color: #333;
		margin-right: 10px;
		font-weight: 500;
	}
	
	.filter input[type="text"] {
		padding: 10px 15px;
		border: 1px solid #3a7e6f;
		border-radius: 4px;
		width: 300px;
		max-width: 100%;
	}
	
	.filter button {
		background-color: #3a7e6f;
		color: #fff;
		border: none;
		padding: 10px 20px;
		border-radius: 4px;
		margin-left: 15px;
		cursor: pointer;
		transition: all 0.3s;
	}
	
	.filter button:hover {
		background-color: #2d6557;
	}
	
	/* 新闻列表项样式 */
	.list-container {
		margin-bottom: 30px;
	}
	
	.list-item-body {
		display: flex;
		background: #fff;
		padding: 20px;
		margin-bottom: 20px;
		border-radius: 6px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.list-item-body:hover {
		transform: translateY(-3px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	}
	
	.list-item-body img {
		width: 180px;
		height: 120px;
		object-fit: cover;
		border-radius: 4px;
		margin-right: 20px;
	}
	
	.list-item-body .infos {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	
	.list-item-body .h {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}
	
	.list-item-body .title {
		font-size: 17px;
		font-weight: bold;
		color: #333;
		margin-right: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.list-item-body .time {
		color: #999;
		font-size: 14px;
	}
	
	.list-item-body .desc {
		color: #666;
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 10px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		flex: 1;
	}
	
	.list-item-body .tag {
		display: inline-block;
		background-color: #3a7e6f;
		color: #fff;
		padding: 3px 10px;
		border-radius: 4px;
		font-size: 12px;
		align-self: flex-start;
	}
	
	/* 分页 */
	.pager {
		text-align: center;
		margin: 30px 0;
	}
	
	/* 响应式设计 */
	@media screen and (max-width: 768px) {
		.list-item-body {
			flex-direction: column;
		}
		
		.list-item-body img {
			width: 100%;
			height: 180px;
			margin-right: 0;
			margin-bottom: 15px;
		}
		
		.filter {
			flex-direction: column;
			align-items: stretch;
		}
		
		.filter .item-list {
			margin-bottom: 10px;
		}
		
		.filter input[type="text"] {
			width: 100%;
		}
		
		.filter button {
			margin-left: 0;
			width: 100%;
		}
	}
</style>
<body>
  <div id="app">
    <div class="page-container">
		<div class="layui-carousel" id="test1">
		  <div carousel-item>
			<div v-for="(item,index) in swiperList" :key="index">
				<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
			</div>
		  </div>
		</div>

		<div class="content-title">
	      <div class="title">系统公告</div>
		  <div class="position">您现在的位置：系统公告</div>
	    </div>
		
	    <form class="layui-form filter">
            <div class="item-list">
                <div class="lable">标题</div>
                <input type="text" name="title" id="title" placeholder="请输入公告标题关键词" autocomplete="off" class="layui-input">
            </div>
            <button id="btn-search" type="button" class="layui-btn layui-btn-normal">
              	<i class="fas fa-search"></i> 搜索
            </button>
        </form>
		
		<div class="list-container">
			<div @click="jump('../news/detail.html?id='+item.id);" v-for="(item,index) in dataList" :key="index" class="list-item-body animation-box">
				<img :src="baseurl+item.picture">
				<div class="infos">
					<div class="h">
						<div class="title">{{item.title}}</div>
						<div class="time">{{item.addtime}}</div>
					</div>
					<div class="desc">{{item.introduction}}</div>
					<div class="tag">新闻动态</div>
				</div>
			</div>
		</div>
		
		<div class="pager" id="pager"></div>
    </div>
  </div>

  <script src="../../layui/layui.js"></script>
  <script src="../../js/swiper.min.js"></script>
  <script src="../../js/vue.js"></script>
  <script src="../../js/config.js"></script>
  <script src="../../modules/config.js"></script>
  <script src="../../js/utils.js"></script>

  <script type="text/javascript">
    var vue = new Vue({
      el: '#app',
      data: {
        swiperList: [],
        dataList: [],
		baseurl:''
      },
      filters: {
        newsDesc: function(val) {
          if (val) {
            if (val.length > 60) {
              return val.substring(0, 60).replace(/<[^>]*>/g).replace(/undefined/g, '');
            } else {
              return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
            }
          }
          return '';
        }
      },
      methods: {
        jump(url) {
          jump(url)
        }
      }
    });

    layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery'], function() {
      var layer = layui.layer;
	  var element = layui.element;
	  var carousel = layui.carousel;
	  var laypage = layui.laypage;
	  var http = layui.http;
	  var jquery = layui.jquery;

	  vue.baseurl = http.baseurl;
      var limit = 10;

      // 获取轮播图 数据
      http.request('config/list', 'get', {
        page: 1,
        limit: 5
      }, function(res) {
        if (res.data.list.length > 0) {
			let swiperList = [];
			res.data.list.forEach(element => {
				if (element.value != null) {
				  swiperList.push({
					img: http.baseurl+element.value
				  });
				}
			});
			vue.swiperList = swiperList;
          
			vue.$nextTick(() => {
				carousel.render({
					elem: '#test1',
					width: '100%',
					height: '350px',
					arrow: 'hover',
					anim: 'default',
					autoplay: 'true',
					interval: '3000',
					indicator: 'outside'
				});
			})
		}
      });

      // 分页列表
      pageList();

      // 搜索按钮
      jquery('#btn-search').click(function(e) {
        pageList();
      });
      function pageList() {
	      // 获取列表数据
	      http.request('news/list', 'get', {
		    page: 1,
		    limit: limit,
            sort: 'addtime',
            order: 'desc',
		    title: '%' + jquery('#title').val() + '%',
	      }, function(res) {
		    vue.dataList = res.data.list
		    // 分页
		    laypage.render({
		      elem: 'pager',
		      count: res.data.total,
		      limit: limit,
			  groups: 5,
			  layout: ["prev","page","next"],
			  theme: '#3a7e6f',
		      jump: function(obj, first) {
		        //首次不执行
		        if (!first) {
		          http.request('news/list', 'get', {
			        page: obj.curr,
			        limit: obj.limit
		          }, function(res) {
			        vue.dataList = res.data.list
		          })
		        }
		      }
		    });
	      });                             
      }
    });
  </script>
</body>
</html>
